<template>
  <div class="container">
    <div class="row">
      <div class="cell left-top">
        <slot name="leftTop"></slot>
      </div>
      <div class="cell top">
        <slot name="top"></slot>
      </div>
      <div class="cell right-top">
        <slot name="rightTop"></slot>
      </div>
    </div>
    <div class="row">
      <div class="cell left">
        <slot name="left"></slot>
      </div>
      <div class="cell center">
        <slot name="center"></slot>
      </div>
      <div class="cell right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="row">
      <div class="cell left-bottom">
        <slot name="leftBottom"></slot>
      </div>
      <div class="cell bottom">
        <slot name="bottom"></slot>
      </div>
      <div class="cell right-bottom">
        <slot name="rightBottom"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: 'container',
  props: {
    minWidth: {
      type: Number
    }
  },
  computed: {
    style () {
      return {
        minWidth: this.minWidth + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .row {
    width: 80%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cell {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .top {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .right-top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .left-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .bottom {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .right-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
</style>
